<!doctype html>
<html lang="zh-CN">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <title>人人影视</title>
    <!-- Template CSS -->
    <!--<link rel="stylesheet" href="assets/css/style-starter.css">-->
    <link rel="stylesheet" th:href="@{/static/css/style-starter.css}">
    <!-- Template CSS -->
    <link href="//fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,600&display=swap"
          rel="stylesheet">
    <!-- Template CSS -->
</head>

<body>
<!-- header -->
<header class="w3l-header fixed-top" id="site-header">
    <!--/nav-->
    <nav class="navbar navbar-expand-lg navbar-light fill px-lg-0 py-0 px-3">
        <div class="container">
            <h1><a class="navbar-brand" th:href="@{/user/toIndex}">
                人人影视 </a></h1>
            <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"
                    class="navbar-toggler collapsed" data-target="#navbarSupportedContent" data-toggle="collapse"
                    type="button">
                <!-- <span class="navbar-toggler-icon"></span> -->
                <span class="fa icon-expand fa-bars"></span>
                <span class="fa icon-close fa-times"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" th:href="@{/user/toIndex}">主页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">关于我们</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">联系我们</a>
                    </li>
                </ul>

                <!--/search-right-->
                <!--/search-right-->
                <div class="search-right">
                    <a class="btn search-hny mr-lg-3 mt-lg-0 mt-4" href="#search" title="search">搜索 <span
                            aria-hidden="true" class="fa fa-search ml-3"></span></a>
                    <!-- search popup -->
                    <div class="pop-overlay" id="search">
                        <div class="popup">
                            <form action="#" class="search-box" method="post">
                                <input autofocus="" name="search" placeholder="Search your Keyword"
                                       required="required" type="search">
                                <button class="btn" type="submit"><span aria-hidden="true"
                                                                        class="fa fa-search"></span></button>
                            </form>
                            <div class="browse-items">
                                <h3 class="hny-title two mt-md-5 mt-4">荣光影视搜索</h3>
                                <ul class="search-items">
                                    <li><a href="#">影视</a></li>
                                    <li><a href="#">新闻</a></li>
                                    <li><a href="#">生活</a></li>
                                    <li><a href="#">美食</a></li>
                                    <li><a href="#">音乐</a></li>
                                    <li><a href="#">电视剧</a></li>
                                    <li><a href="#">舞蹈</a></li>
                                    <li><a href="#">动漫</a></li>
                                    <li><a href="#">娱乐</a></li>
                                    <li><a href="#">科技数码</a></li>
                                    <li><a href="#">体育</a></li>
                                    <li><a href="#">美妆</a></li>
                                </ul>
                            </div>
                        </div>
                        <a class="close" href="#close">×</a>
                    </div>
                    <!-- /search popup -->
                    <!--/search-right-->
                </div>


            </div>
            <!-- toggle switch for light and dark theme -->
            <div class="mobile-position">
                <nav class="navigation">
                    <div class="theme-switch-wrapper">
                        <label class="theme-switch" for="checkbox">
                            <input id="checkbox" type="checkbox">
                            <div class="mode-container">
                                <i class="gg-sun"></i>
                                <i class="gg-moon"></i>
                            </div>
                        </label>
                    </div>
                </nav>
            </div>
            <!-- //toggle switch for light and dark theme -->
            <div th:unless="${session.user}">
                <a class="btn btn-primary btn-lg" style="height: 38px;font-size: 14px;"
                   th:href="@{/user/toLogin}">登录</a>
            </div>
            <div th:if="${session.user}">
                <div>
                    <button class="layui-btn layui-btn-primary" id="demo4" style="border-radius:7%;height: 50px;">
                        <span th:text="${session.user.userName}"></span>
                        <i class="layui-icon">&#xe667;</i>
                        <span th:text="${session.messageCount}"></span>
                    </button>
                </div>

            </div>
            <div th:if="${session.user}">
                <div style="height: 50px;width: 50px;position: relative; margin-left: 10px">
                    <img height="100%" th:src="${session.user.iconUrl}" width="100%">
                </div>
            </div>
        </div>
    </nav>
    <!--//nav-->
</header>
<!-- //header -->
<!--/breadcrumbs -->
<div class="w3l-breadcrumbs">
    <nav class="breadcrumbs" id="breadcrumbs">
        <div class="container page-wrapper">
            <a th:href="@{/user/toIndex}">主页</a> » <span aria-current="page" class="breadcrumb_last">结果</span>
        </div>
    </nav>
</div>
<!--//breadcrumbs -->
<!--/genre -->
<!--grids-sec1-->
<section class="w3l-grids">
    <div class="grids-main py-4">
        <div class="container py-lg-4">
            <div class="headerhny-title">
                <h3 class="hny-title">搜索结果</h3>
            </div>
            <div class="w3l-populohny-grids">
                <div class="item vhny-grid">
                    <div class="box16" th:each="item: ${videoList}">
                        <a th:href="@{/video/videoPlay(videoId=${item.videoId})}">
                            <figure>
                                <img alt="" class="img-fluid" th:src="${item.thunmbnailUrl}">
                            </figure>
                            <div class="box-content">
                                <h3 class="title" th:text="${item.videoTitle}"></h3>
                                <h4> <span class="post"><span class="fa fa-clock-o"> </span>*
										</span>
                                    <span class="post fa fa-heart text-right"></span>
                                </h4>
                            </div>
                            <span aria-hidden="true" class="fa fa-play video-icon"></span>
                        </a>
                    </div>
                    <!--<div class="box16 mt-4">
                        <a href="#">
                            <figure>
                                <img class="img-fluid" src="assets/images/banner2.jpg" alt="">
                            </figure>
                            <div class="box-content">
                                <h3 class="title">Frozen 2</h3>
                                <h4> <span class="post"><span class="fa fa-clock-o"> </span> 1 Hr 4min

                                    </span>

                                    <span class="post fa fa-heart text-right"></span>
                                </h4>
                            </div>
                            <span class="fa fa-play video-icon" aria-hidden="true"></span>
                        </a>
                    </div>-->
                </div>
                <!--div class="item vhny-grid">
                    <div class="box16">
                        <a href="#">
                            <figure>
                                <img class="img-fluid" src="assets/images/banner3.jpg" alt="">
                            </figure>
                            <div class="box-content">
                                <h3 class="title">Doctor Sleep</h3>
                                <h4> <span class="post"><span class="fa fa-clock-o"> </span> 1 Hr 4min

                                    </span>

                                    <span class="post fa fa-heart text-right"></span>
                                </h4>
                            </div>
                            <span class="fa fa-play video-icon" aria-hidden="true"></span>
                        </a>
                    </div>
                    <div class="box16 mt-4">
                        <a href="#">
                            <figure>
                                <img class="img-fluid" src="assets/images/banner4.jpg" alt="">
                            </figure>
                            <div class="box-content">
                                <h3 class="title">Toy story 4</h3>
                                <h4> <span class="post"><span class="fa fa-clock-o"> </span> 1 Hr 4min

                                    </span>

                                    <span class="post fa fa-heart text-right"></span>
                                </h4>
                            </div>
                            <span class="fa fa-play video-icon" aria-hidden="true"></span>
                        </a>
                    </div>
                </div>
                <div class="item vhny-grid">
                    <div class="box16">
                        <a href="#">
                            <figure>
                                <img class="img-fluid" src="assets/images/banner1.jpg" alt="">

                            </figure>
                            <div class="box-content">
                                <h3 class="title">Rocketman</h3>
                                <h4> <span class="post"><span class="fa fa-clock-o"> </span> 1 Hr 4min

                                    </span>

                                    <span class="post fa fa-heart text-right"></span>
                                </h4>
                            </div>
                            <span class="fa fa-play video-icon" aria-hidden="true"></span>
                        </a>
                    </div>
                    <div class="box16 mt-4">
                        <a href="#">
                            <figure>
                                <img class="img-fluid" src="assets/images/banner2.jpg" alt="">
                            </figure>
                            <div class="box-content">
                                <h3 class="title">Frozen 2</h3>
                                <h4> <span class="post"><span class="fa fa-clock-o"> </span> 1 Hr 4min

                                    </span>

                                    <span class="post fa fa-heart text-right"></span>
                                </h4>
                            </div>
                            <span class="fa fa-play video-icon" aria-hidden="true"></span>
                        </a>
                    </div>
                </div>-->
            </div>
        </div>
    </div>
</section>

</body>

</html>
<script th:src="@{/static/js/jquery-1.9.1.min.js}"></script>

<script th:src="@{/static/js/theme-change.js}"></script>
<!-- //theme-change-->
<script th:src="@{/static/js/owl.carousel.js}"></script>
<script>
    $(document).ready(function () {
        $('.owl-four').owlCarousel({
            loop: true,
            margin: 20,
            nav: false,
            responsiveClass: true,
            autoplay: false,
            autoplayTimeout: 5000,
            autoplaySpeed: 1000,
            autoplayHoverPause: false,
            responsive: {
                0: {
                    items: 1,
                    nav: false
                },
                480: {
                    items: 2,
                    nav: true
                },
                667: {
                    items: 2,
                    nav: true
                },
                1000: {
                    items: 2,
                    nav: true
                }
            }
        })
    })
</script>
<script>
    $(document).ready(function () {
        /*
                $('.owl-two').owlCarousel({
                    loop: true,
                    margin: 40,
                    nav: false,
                    responsiveClass: true,
                    autoplay: true,
                    autoplayTimeout: 5000,
                    autoplaySpeed: 1000,
                    autoplayHoverPause: false,
                    responsive: {
                        0: {
                            items: 1,
                            nav: false
                        },
                        480: {
                            items: 2,
                            nav: true
                        },
                        667: {
                            items: 2,
                            margin: 20,
                            nav: true
                        },
                        1000: {
                            items: 3,
                            nav: true
                        }
                    }
                })
        */
    })
</script>
<!-- //script -->
<!-- //script -->
<!-- script for owlcarousel -->
<!-- disable body scroll which navbar is in active -->
<script>
    $(function () {
        $('.navbar-toggler').click(function () {
            $('body').toggleClass('noscroll');
        })
    });
</script>
<!-- disable body scroll which navbar is in active -->

<!--/MENU-JS-->
<script>
    $(window).on("scroll", function () {
        var scroll = $(window).scrollTop();

        if (scroll >= 80) {
            $("#site-header").addClass("nav-fixed");
        } else {
            $("#site-header").removeClass("nav-fixed");
        }
    });

    //Main navigation Active Class Add Remove
    $(".navbar-toggler").on("click", function () {
        $("header").toggleClass("active");
    });
    $(document).on("ready", function () {
        if ($(window).width() > 991) {
            $("header").removeClass("active");
        }
        $(window).on("resize", function () {
            if ($(window).width() > 991) {
                $("header").removeClass("active");
            }
        });
    });
</script>
